{% extends '_base.html' %}

{% block style %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/login.css') }}">
<style>
    header {
        height: 100vh;
    }

    body {
        background-image: url({{ url_for('static', filename='img/d.jpg') }});
    }
</style>
{% endblock %}

{% block title %}
Login {{ url_for('static', filename='') }}
{% endblock %}

{% block header_content %}
<div class="container-flex">
    <div class="login-box">
        <form method="POST" autocomplete="off">
            <div class="input-item">
                <div class="label">邮箱/手机号</div>
                <input required class="input" name="email" type="text" autocomplete="off">
            </div>
            <div class="input-item">
                <div class="label">验证码</div>
                <input class="input code" type="button" value="获取验证码">
                <input class="input" id="code" required type="text" name="code">
            </div>
            <div class="input-item">
                <div class="label">新密码</div>
                <input class="input password" type="password">
                <input id="hpwd" hidden type="password" name="password">
            </div>
            <div class="input-item">
                <input class="submit" type="button" value="忘记密码">
            </div>
            <div class="fn">
                <a href="./index">返回首页</a> -
                <a href="./login">登录</a>
            </div>
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
        </form>
    </div>
</div>
{% endblock %}

{% block js %}
<script src="{{url_for('static', filename='js/md5.js')}}"></script>
<script>
    let form = document.querySelector('.login-box form')
    let body = document.body
    form.addEventListener('mouseover', function () {
        body.classList.add('filter')
    })

    form.addEventListener('mouseout', function () {
        body.classList.remove('filter')
    })
    let submit = document.querySelector('form .submit')
    submit.addEventListener('click', function (e) {
        let password = document.querySelector('form .password')
        let hpwd = document.querySelector('#hpwd')
        hpwd.value = hex_md5(password.value)
        form.submit()
    })
</script>
<script>
    function sendCode(email){
        let xhr = new XMLHttpRequest()
        xhr.open('post', '{{url_for('views.forget_password_send_code')}}', false)
        xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token() }}")
        xhr.send(JSON.stringify({"email": email}))
        return true
    }
    let btn = document.querySelector('.input.code')
    btn.onclick = function () {
        btn.disabled = true
        let email = document.querySelector("form > div:nth-child(1) > input").value 
        if (!email){
            alert("email 错误！！！")
            btn.disabled = false
            return false
        }
        let f = 10
        let t = setInterval(function () {
            if (f == 0) {
                clearInterval(t)
                btn.disabled = false
                btn.value = "获取验证码"
                return
            }
            btn.value = "" + f + "秒后重试"
            f--
        }, 1000)

        sendCode(email)
    }
    
</script>
{% endblock %}

{% block main %}
{% endblock %}